<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <title>HTML Starter</title>
  <meta name="description" content="">
  ${require('./partials/head.html')}
</head>

<body class="bg-gray-100">
  ${require('./partials/browserupgrade.html')}
  ${require('./partials/header.html')}


  <section class="flex mt-32">
    <div class="container mx-auto ">
      <div class="flex flex-wrap">
        <div class="w-full md:w-1/2 lg:w-1/3 p-2 ">
          <div class="w-full bg-white shadow-lg">
            <div class=" relative cursor-pointer">
              <img src="https://tailwindcss.com/img/card-top.jpg" alt="">
              <div class=" absolute inset-0 opacity-0 hover:opacity-100">
                <div class="flex flex-col items-center justify-center h-full">
                  <div class="uppercase text-white z-10">read more</div>
                  <div class=" absolute inset-0 bg-gray-700 opacity-0 hover:opacity-50 z-0">
                  </div>
                </div>
              </div>
            </div>
            <div class="px-6 py-4">
              <div class="meta">
                <a class="text-sm text-gray-600 hover:text-gray-800" href="#">Coldest,</a>
                <a class="text-sm text-gray-600 hover:text-gray-800" href="#">Sunset</a>
              </div>
              <div class="title my-1">
                <a class="font-bold text-xl text-gray-800 hover:text-gray-600" href="#">The Coldest Sunset</a>
              </div>
              <div class="author">
                <span class="text-sm text-gray-600">By</span>
                <a class="text-sm text-gray-600 hover:text-gray-800" href="#">zhaopeng</a>
                <time class="text-sm text-gray-600 hover:text-gray-800">June 3, 2019</time>
              </div>
              <div class="absctrat mt-2">
                <p class="text-gray-700 text-base">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et
                  perferendis eaque, exercitationem praesentium nihil.
                </p>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <div class="flex mt-10 mb-20">
    <div class="container mx-auto">
      <div class="mt-8 text-center">
        <div class="inline-flex bg-white rounded-full shadow text-xs font-bold">
          <div class="border-r mr-1 pr-1">
            <a href="browse?page=6" rel="prev"
              class="no-underline text-black px-2 py-2 text-lg inline-flex items-center uppercase transition hover:-translateY-sm">
              <span class="text-xs">Prev</span>
            </a>
          </div>

          <div class="hidden md:flex items-center">
            <a href="browse?page=1"
              class="no-underline mx-1 px-2 py-2 text-black font-bold hover:bg-black hover:text-white rounded transition hover:-translateY-sm">1</a>
            <a href="browse?page=2"
              class="no-underline mx-1 px-2 py-2 text-black font-bold hover:bg-black hover:text-white rounded transition hover:-translateY-sm">2</a>
            <button
              class="mx-1 px-2 py-2 text-black font-bold hover:bg-black hover:text-white rounded transition hover:-translateY-sm">...</button>
            <a href="browse?page=43"
              class="no-underline mx-1 px-2 py-2 text-black font-bold hover:bg-black hover:text-white rounded transition hover:-translateY-sm">43</a>
          </div>

          <div class="md:border-l md:pl-1 md:ml-1">
            <a href="browse?page=8" rel="next"
              class="no-underline text-black px-2 py-2 text-lg inline-flex items-center uppercase transition hover:-translateY-sm">
              <span class="text-xs">Next</span>
            </a>
          </div>
        </div>

      </div>
    </div>
  </div>
  ${require('./partials/footer.html')}
</body>

</html>
